<template>

	<view class="home-page">
		<Header :header-data="headerData" />
		<!-- 顶部功能区 -->

		<view class="top-function">
			<view class="function-row1">
				<image class="function-item" :src="getFullImageUrl('@/static/zhaodazi/时空邂逅.png')" mode="widthFix"
					style="width: 308rpx;height: 205rpx;"></image>
				<image class="function-item" :src="getFullImageUrl('@/static/zhaodazi/理想型匹配.png')" mode="widthFix"
					style="width: 294rpx;height: 174rpx;"></image>

			</view>
			<view class="function-row2">

				<image class="function-item" :src="getFullImageUrl('@/static/zhaodazi/发布招募.png')" mode="widthFix"
					style="width: 379rpx;height: 269rpx;">
				</image>
				<image class="function-item" :src="getFullImageUrl('@/static/zhaodazi/谁看过我.png')" mode="widthFix"
					style="width: 364rpx;height: 102rpx;"></image>
			</view>
		</view>

		<!-- 标签栏 -->
		<view class="tab-bar">
			<view class="tab-item-container">
				<view class="tab-item" :class="{ active: currentTab === 'online' }" @click="switchTab('online')">在线邻友
				</view>
				<view class="tab-item" :class="{ active: currentTab === 'recruit' }" @click="switchTab('recruit')">招募大厅
				</view>
			</view>
			<view class="sort-container">
				<view class="sort-btn" :class="{ active: showSortMenu }" @click="toggleSortMenu">
					<span>{{ activeSortOption }}</span>
					<uni-icons :type="showSortMenu ? 'up' : 'down'" size="11"
						:color="activeSort === 'distance' ? '#0E1C37' : '#888B9A'" />
				</view>

				<!-- 排序下拉菜单 -->
				<view class="dropdown-menu" v-if="showSortMenu">
					<view @click="selectSortOption('distance')" :class="activeSort === 'distance' ? 'active' : ''">
						<text>距离排序</text>
						<image v-if="activeSort === 'distance'" class="check-icon" src="/static/image/gou.png"
							mode="aspectFit"></image>
					</view>

					<view @click="selectSortOption('male')" :class="activeSort === 'male' ? 'active' : ''">
						<text>只看女生</text>
						<image v-if="activeSort === 'male'" class="check-icon" src="/static/image/gou.png"
							mode="aspectFit"></image>
					</view>
					<view @click="selectSortOption('female')" :class="activeSort === 'female' ? 'active' : ''">
						<text>只看男生</text>
						<image v-if="activeSort === 'female'" class="check-icon" src="/static/image/gou.png"
							mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 内容区，根据 tab 切换 -->
		<view class="content-wrap" v-if="currentTab === 'online'">
			<!-- 加载状态 -->
			<view v-if="loading && onlineFriendList.length === 0" class="loading-state">
				<uni-load-more status="loading"></uni-load-more>
			</view>

			<!-- 空数据提示 -->
			<view v-if="!loading && onlineFriendList.length === 0" class="empty-state">
				<image class="empty-icon" src="/static/image/empty.png" mode="aspectFit"></image>
				<text class="empty-text">附近暂无用户，换个位置试试吧~</text>
			</view>

			<!-- 用户列表 -->
			<view class="friend-item" v-for="(friend, fIdx) in filteredFriendList" :key="fIdx">
				<view class="friend-item-content">

					<image class="friend-avatar" :src="friend.avatar" mode="aspectFill"
						@error="handleImageError(friend)">
					</image>
					<view class="friend-info">
						<view class="friend-name">
							{{ friend.name }}
							<image v-if="friend.gender === 0" :src="getFullImageUrl('@/static/zhaodazi/boy.png')"
								mode="widthFix" style="width: 23rpx;height: 27.3rpx;margin-left: 20rpx;"></image>
							<image v-else-if="friend.gender === 1" :src="getFullImageUrl('@/static/zhaodazi/girl.png')"
								mode="widthFix" style="width: 23rpx;height: 27.3rpx;margin-left: 20rpx;"></image>

						</view>
						<view class="friend-desc">
							{{ friend.age }} 岁
							<text class="distance">{{ friend.height }}cm</text>
							<text class="distance">{{ friend.constellation }}</text>
						</view>
						<view class="friend-describe" v-if="friend.describe">
							{{ friend.describe }}
						</view>
						<view class="friend-tags">
							<text class="tag" v-for="(tag, tIdx) in friend.tags" :key="tIdx">{{ tag }}</text>
						</view>
					</view>
					<image class="hi-btn" :src="getFullImageUrl('@/static/dazi/dzh.png')" mode="aspectFit"
						@click="sayHi(friend)"></image>
				</view>
				<view v-if="friend.media && friend.media.length > 0" class="media-scroll">
					<!-- 只有当用户有媒体数据时才显示媒体滚动区域 -->
					<scroll-view scroll-x="true" show-scrollbar="false">
						<view class="media-container">
							<template v-for="(media, index) in friend.media">
								<view v-if="media.type === 'video' && media.url" class="media-item video-item"
									:key="index" @click="playVideo(media)">
									<video :src="media.url" mode="aspectFill" class="media-video" :controls="false"
										:show-center-play-btn="false" :show-fullscreen-btn="false"
										:show-play-btn="false" :show-progress="false" :show-mute-btn="false"
										:enable-progress-gesture="false" :enable-progress-tap="false"
										:enable-play-gesture="false" :show-loading="false"></video>
									<image class="play-icon" :src="getFullImageUrl('@/static/faxian/bofan.png')">
									</image>

								</view>
								<image v-else-if="media.type === 'image' && media.url" :src="media.url"
									mode="aspectFill" class="media-item" :key="index"
									@click="previewImage(media, index, friend)"></image>
							</template>
						</view>
					</scroll-view>
				</view>


			</view>

			<!-- 加载更多 -->
			<view v-if="loading && onlineFriendList.length > 0" class="loading-more">
				<uni-load-more status="loading"></uni-load-more>
			</view>

			<view v-if="!hasMore && onlineFriendList.length > 0" class="no-more">
				<text>没有更多了~</text>
			</view>
		</view>
		<view class="content-wrap" v-else-if="currentTab === 'recruit'">
			<!-- 招募大厅内容可类似在线钓友结构扩展，这里简单示例 -->
			<view class="friend-item" v-for="(recruit, rIdx) in recruitList" :key="rIdx">
				<image class="friend-avatar" :src="recruit.avatar" mode="aspectFill"></image>
				<view class="friend-info">
					<view class="friend-name">{{ recruit.name }} {{ recruit.suffix }}</view>
					<view class="friend-desc">{{ recruit.age }}岁 {{ recruit.height }}cm {{ recruit.zodiac }}</view>
					<view class="friend-describe" v-if="recruit.describe">
						{{ recruit.describe }}
					</view>
					<view class="friend-tags">
						<text class="tag" v-for="(tag, tIdx) in recruit.tags" :key="tIdx">{{ tag }}</text>
					</view>
				</view>
				<image class="hi-btn" :src="getFullImageUrl('@/static/dazi/dzh.png')" mode="aspectFit"
					@click="sayHi(recruit)">
				</image>
			</view>
		</view>
	</view>
</template>
<script src="./lookingBuddy.js"></script>
<style lang="scss" src="./lookingBuddy.scss"></style>
